<!--  -->
<template>
  <div class="main">
    <!-- 切换栏 -->
    <div class="table">
      <div
        class="table-item"
        @click="current = 0"
        :class="{ active: current === 0 }"
      >
        热门球员
      </div>
      <div
        class="table-item"
        @click="current = 1"
        :class="{ active: current === 1 }"
      >
        热门球队
      </div>
    </div>

    <!-- 展示内容 -->
    <div
      class="content"
      v-if="current === 0"
      v-for="item in players"
      :key="item.name"
    >
      <!-- 头像 -->
      <Photo :src="item.img" :alt="item.name" :rate="item.rate" />
      <!-- 热度 -->
      <div class="hot">
        <h2 style="color: white">{{ item.name }}</h2>
        <HotBar :hot="item.hot" />
      </div>
    </div>

    <div
      class="content"
      v-if="current === 1"
      v-for="item in teams"
      :key="item.name"
    >
      <!-- 头像 -->
      <Photo :src="item.img" :alt="item.name" :rate="item.rate" />
      <!-- 热度 -->
      <div class="hot">
        <h2 style="color: white">{{ item.name }}</h2>
        <HotBar :hot="item.hot" />
      </div>
    </div>
  </div>
</template>


<script setup>
import { reactive, ref } from "vue";
import Photo from "./components/Photo.vue";
import HotBar from "./components/HotBar.vue";

// 创建一个变量来记录选项卡的状态
const current = ref(0); // 0 表示球员， 1 表示球队

const players = reactive([
  {
    name: "梅西",
    img: "/images/messi.png",
    rate: 1,
    hot: 433760,
  },
  {
    name: "C罗",
    img: "/images/ronaldo.png",
    rate: 2,
    hot: 333760,
  },
  {
    name: "内马尔",
    img: "/images/neymar.png",
    rate: 3,
    hot: 233760,
  },
]);

const teams = reactive([
  {
    name: "法国",
    img: "/images/法国.jpg",
    rate: 1,
    hot: 333760,
  },
  {
    name: "巴西",
    img: "/images/巴西.jpg",
    rate: 2,
    hot: 233760,
  },
  {
    name: "荷兰",
    img: "/images/荷兰.jpg",
    rate: 3,
    hot: 133760,
  },
]);
</script>


<style scoped>
/* @import url(); 引入公共css类 */
.main {
  box-sizing: border-box;
  width: 600px;
  padding: 20px;
  margin: 0 auto;
  background-color: rgb(14, 35, 219);
}

.table {
  display: flex;
  flex-direction: row;

  padding: 10px auto;
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.table-item {
  background-color: white;
  text-align: center;
  height: 30px;
  line-height: 30px;
  width: 50%;
  font-size: 13px;
}

.active {
  color: white;
  background-color: rgb(206, 42, 42);
}

.content {
  height: 120px;
  /* background-color: #fff; */
  display: flex;
  flex-direction: row;
  margin: 20px;
}

.hot {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px;
}
</style>